<template>
    <div>
        <div>
            <div class="Newexportsearchrefresh">
                <div class="Addexport">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addLists()">新增</el-button>
                    <!-- <el-button type="info" icon="el-icon-upload2">导出</el-button> -->
                    <el-button type="warning" plain icon="el-icon-download" class="yello-button" @click="exports()">导出</el-button>
                </div>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="150"> </el-table-column>
            <el-table-column prop="belongName" label="所属客户" width="120"> </el-table-column>
            <el-table-column prop="name" label="供应商名称" width="120"> </el-table-column>
            <el-table-column prop="number" label="供应商编号" width="120"> </el-table-column>
            <el-table-column prop="contacts" label="联系人" width="300"> </el-table-column>
            <el-table-column prop="phone" label="手机号码" width="120"> </el-table-column>
             <el-table-column prop="status" label="占用标志" width="120" >
                <template slot-scope="scope">
                    {{ scope.row.status == 0 ? '启用' : '停用' }}
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="putt(scope.row)">
                        {{ scope.row.status == 1 ? '启用' : '停用' }}
                    </el-button>
                    <el-button @click="del(scope.row.sId)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
          <div class="block">
                <el-pagination
                style="float:right;"
            background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pain.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pain.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                >
                </el-pagination>
            </div>
        <!-- 修改和新增 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="供应商名称" prop="name">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
<el-form-item label="供应商编号" prop="number">
      <el-input v-model="form.number" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address">
      <el-input v-model="form.address" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系人" prop="contacts">
      <el-input v-model="form.contacts" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="所属客户" prop="belongName">
                    <el-input placeholder="请输入内容" v-model="form.belongName" :disabled="true">
                        <el-button slot="append" @click="getDate">选择</el-button>
                    </el-input>
                </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="Addandmodify">确 定</el-button>
  </div>
</el-dialog>
        <!-- 所属客户 -->
        <el-dialog title="归属仓储客户选择" :visible.sync="dialogTableVisible">
            <el-table :data="gridData" style="width: 1080px">
                <el-table-column property="name" label="名称" width="150"></el-table-column>
                <el-table-column property="address" label="地址" width="200"></el-table-column>
                <el-table-column property="contacts" label="联系人"></el-table-column>
                <el-table-column property="callNumber" label="电话"></el-table-column>
                <el-table-column property="fax" label="传真"></el-table-column>
                <el-table-column property="phone" label="手机"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row.name, scope.row.cId)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 所属客户弹窗分页 -->
            <div class="block">
                <el-pagination
                style="float:right;"
            background
                    @size-change="handleSizeChang"
                    @current-change="handleCurrentChang"
                    :current-page="pagi.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pagi.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagi.total"
                >
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {Consigneedetails,customer,Consigneeinformation,Consigne,Consignedel } from '../../api/user.js'
export default {
    data() {
        return {
            // 数据
            tableData:[],
            // 新增和修改表单
            // 分页
            pain:{
                pageNum: 1,
                pageSize: 10
            },
             // 所属客户
            gridData: [],
            dialogTableVisible: false,
            // 所属客户分页
            pagi: {
                pageNum: 1,
                pageSize: 10,
                total: undefined
            },
            // 修改和新增弹窗
            dialogFormVisible:false,
            // 修改和新增表单
            form:{},
            // 总条目数
            total:undefined,
            title:undefined
        };
    },
    methods: {
        // 数据
        getdata(){
            Consigneedetails(this.pain).then((ref)=>{
                console.log(ref);
                this.tableData = ref.rows
                this.total = ref.total
                // console.log(this.total);
            })
        },
        // 新增弹窗
        addLists() {
            this.dialogFormVisible= true
            this.title = '添加供应商'
        },
        // 修改弹窗
        handleClick(val){
            this.dialogFormVisible = true
            this.title="修改供应商"
            this.form = val
        },
        // 删除
        del(sId){
 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            Consignedel(sId).then((ref)=>{
                console.log(ref);
                this.getdata()
            })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        // 启用停用
        putt(val){
            if(val.status == 1){
                var txt = '启用'
            }else{
                txt= '停用'
            }
             this.$confirm(`是否${txt}文件, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            Consignedel(sId).then((ref)=>{
                console.log(ref);
                this.getdata()
            })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        },
        // 新增和修改
        Addandmodify(){
            if(this.form.sId){
Consigne(this.form).then((ref)=>{
    console.log(ref);
    this.dialogFormVisible = false
    this.getdata()
})
            }else{
            Consigneeinformation(this.form).then((ref)=>{
                console.log(ref);
                this.dialogFormVisible = false
    this.getdata()
            })
            }
        },
          // 所属客户
        getDate() {
            this.dialogTableVisible = true;
            customer(this.pagi).then((ref) => {
                (this.gridData = ref.rows), (this.pagi.total = ref.total);
            });
        },
        // 所属客户选择框
        handleEdit(name, cId) {
            this.dialogTableVisible = false;
            this.form.belongName = name;
            this.form.cId = cId;
        },
        // 所属客户分页
        handleSizeChang(val) {
            this.pagi.pageSize = Number(val);
            this.getDate();
        },
        // 所属客户分页（页数）
        handleCurrentChang(val) {
            this.pagi.pageNum = Number(val);
            this.getDate();
        },
         // 所属客户分页
        handleSizeChange(val) {
            this.pain.pageSize = Number(val);
            this.getdata();
        },
        // 所属客户分页（页数）
        handleCurrentChange(val) {
            this.pain.pageNum = Number(val);
            this.getdata();
        },
    },
    mounted(){
        this.getdata()
    }
};
</script>

<style>
.Newexportsearchrefresh{
    height: 40px;
}
.block{
    height: 20px;
    margin-top: 20px;
}
</style>